<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title>Register</title>
	 <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes" />
	<!-- bower:css -->
	<link rel="stylesheet" href="../../bower_components/bootstrap/dist/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../../bower_components/components-font-awesome/css/fontawesome-all.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-fileinput/css/fileinput.min.css" />
	<link rel="stylesheet" href="../../bower_components/glyphicons/styles/glyphicons.css" />
	<link rel="stylesheet" href="../../bower_components/bootstrap-offcanvas/dist/css/bootstrap.offcanvas.css" />
	<!-- endbower -->

	<!-- inject:css -->
	<link rel="stylesheet" href="../css/common.css">
	<!-- endinject -->
	<style type="text/css">
		.myarrow{
			color:#ccc;
		}
		.avatar-center{
			width:100%;
		}
		.myfa {
			display:inline-block;
			top:27px;
			left:6px;
			position:relative;
			color:#ccc;
		}
		.btn-pos{
			display:inline-block;
			top:27px;
			position:relative;
		}
		input[type="text"],input[type="password"] {
			padding-left:26px;
		}

		.kv-avatar .krajee-default.file-preview-frame,.kv-avatar .krajee-default.file-preview-frame:hover {
			margin: 0;
			padding: 0;
			border: none;
			box-shadow: none;
			text-align: center;
		}
		.kv-avatar {
			display: inline-block;
		}


	</style>
</head>
<body>
<!-- bower:js -->
<script src="../../bower_components/jQuery/dist/jquery.js"></script>
<script src="../../bower_components/jquery/dist/jquery.js"></script>
<script src="../../bower_components/bootstrap/dist/js/bootstrap.js"></script>
<script src="../../bower_components/bootstrap-fileinput/js/fileinput.min.js"></script>
<script src="../../bower_components/bootstrap-offcanvas/dist/js/bootstrap.offcanvas.js"></script>
<!-- endbower -->

<!-- inject:js -->
<script src="../js/index.js"></script>
<!-- endinject -->
<div class="container">
	<div class="form-group">
		<a href="login.html"><i class="myarrow fa fa-arrow-left fa-lg"></i></a>
		<span class="myarrow ml-3">New Account</span>
	</div>

	<div class="row">
		<form class="col-sm-6  col-sm-offset-3 " action="../php/register.php" method="POST" enctype='multipart/form-data'>
			<div class="text-center avatar-center">
				<div class="kv-avatar">
						<div class="file-loading">
							<input id="avatar" name="avatar" type="file" required>
						</div>
				</div>
			</div>
			<div class="form-group">
				<i class="fa myfa fa-user fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Name" name="username" autofocus="autofocus" maxlength="20"/>
			</div>
			<div class="form-group">
				<i class="fa myfa fa-envelope fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Email" name="email"  maxlength="20"/>
			</div>
			<div class="form-group">
				<i class="fa myfa fa-lock fa-lg"></i>
				<input class="form-control" required type="password" placeholder="Password" name="password" maxlength="12"/>
			</div>
			<div class="form-group">
				<i class="fa myfa fa-gift fa-lg"></i>
				<input class="form-control" required type="text" placeholder="Birthday" name="birthday" maxlength="12"/>
			</div>

			<div class="form-group">
				<center><input type="submit" class="btn-pos btn btn-primary btn-lg btn-block btn-circle" value="Create "/></center>
			</div>

		</form>
	</div>


</div>
<script>

    $("#avatar").fileinput({
    	overwriteInitial: true,
    	    showClose: false,
    	    showCaption: false,
    	    showBrowse: true,
    	    showUpload:false,
    	    showDownload:false,
    	    showPreview:true,
    	    uploadAsync:false,
    	    browseOnZoneClick: true,
    	    maxFileSize:0,
    	    enctype:'multipart/form-data',
    	    removeLabel: '',
    	    removeTitle: 'Cancel or reset changes',
    	    msgErrorClass: 'alert alert-block alert-danger',
    	    defaultPreviewContent: '<img src="../img/avatar.png" alt="Your Avatar"><h6 class="text-muted">Click to select</h6>',
    	    allowedFileExtensions: ["jpg", "png", "gif",'jpeg']
    });
    
    

</script>
</body>
</html>
